<template>
    <view class="hdq-container">
        <scroll-view 
            class="list" 
            :scroll-y="true" 
            @scrolltolower="loadMorePolicies"
            :refresher-enabled="true" 
            :refresher-triggered="refresherTriggered" 
            @refresherrefresh="onRefresherRefresh" 
            refresher-background="#f5f5f5"
        >
            <!-- 骨架屏 -->
            <view class="activity-list" v-if="listLoading && activityList.length === 0 && !refresherTriggered">
                <view 
                    class="activity-card skeleton-card" 
                    v-for="n in 3" 
                    :key="n"
                >
                    <!-- 骨架屏图片区域 -->
                    <view class="card-image skeleton-image">
                        <view class="skeleton-status-banner"></view>
                        <view class="skeleton-favorite-btn"></view>
                        <view class="skeleton-title-overlay">
                            <view class="skeleton-title"></view>
                        </view>
                    </view>
                    
                    <!-- 骨架屏详情区域 -->
                    <view class="card-details">
                        <view class="tag-time-row">
                            <view class="skeleton-tag"></view>
                            <view class="skeleton-time"></view>
                        </view>
                        
                        <view class="flex between">
                            <view class="location-participants">
                                <view class="skeleton-location"></view>
                                <view class="skeleton-participants"></view>
                            </view>
                            
                            <view class="action-row">
                                <view class="skeleton-register-btn"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 活动列表 -->
            <view class="activity-list" v-if="activityList.length > 0">
                <view 
                    class="activity-card" 
                    v-for="(item, index) in activityList" 
                    :key="index"
                    @click="goToDetail(item)"
                >
                    <!-- 活动图片区域 -->
                    <view class="card-image">
                        <!-- 状态标签 -->
                        <view class="status-banner" 
                            :class="[item.register_status == 4 ? 'status-ongoing' : 'status-ended']">
                            {{ getStatusText(item) }}
                        </view>
                        
                        <!-- 收藏按钮 -->
                        <view class="favorite-btn" @click.stop="toggleFavorite(item, index)">
                            <u-icon 
                                :name="item.is_collected ? 'heart-fill' : 'heart'" 
                                :color="item.is_collected ? '#ff4757' : '#fff'"
                                size="35rpx"
                            />
                        </view>
                        
                        <!-- 活动图片 -->
                        <image 
                            :src="item.image_urls" 
                            style="width: 100%; height: 360rpx;"
                            mode="aspectFill" 
                        />
                        
                        <!-- 标题遮罩 -->
                        <view class="title-overlay">
                            <text class="activity-title">{{ item.title }}</text>
                        </view>
                    </view>
                    
                    <!-- 活动详情 -->
                    <view class="card-details">
                        <!-- 标签和时间 -->
                        <view class="tag-time-row">
                            <view class="activity-tag">{{ item.category.name }}</view>
                            <view class="activity-time">{{ item.register_time_text }}</view>
                        </view>
                        
                        <view class="flex between">
                            <!-- 位置和报名人数 -->
                            <view class="location-participants">
                                <view class="location">
                                    <u-icon name="map" size="16" color="#333" />
                                    <text>{{ item.address }}</text>
                                </view>
                                <view class="participants">
                                    <view class="meta-avatars">
                                        <image 
                                            v-for="(a,i) in item.register_avatars" :key="i"
                                            :src="a" 
                                            style="width: 32rpx; height: 32rpx; border-radius: 50%;"
                                            mode="aspectFill" 
                                            class="avatar">
                                        </image>
                                    </view>
                                    <text>{{ item.current_participants }}人报名</text>
                                </view>
                            </view>
                            
                            <!-- 报名按钮 -->
                            <view class="action-row">
                                <button 
                                    class="register-btn" 
                                    :class="{ disabled: item.register_status != '4' || item.is_registered }"
                                    @click.stop="handleRegister(item)"
                                    :disabled="item.register_status != '4' || item.is_registered "
                                >
                                    {{ getButtonText(item.is_registered) }}
                                </button>
                            </view>
                        </view>
                    </view>
                </view>
                
                <!-- 加载更多 -->
                <view class="load-more" v-if="hasMore">
                    <u-loading-icon mode="spinner" size="28rpx" color="#999" />
                    <text>加载中...</text>
                </view>
                
                <!-- 没有更多数据 -->
                <view class="no-more" v-else>
                    <text>已经加载全部</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { getCommunityactivityList, postCommunityactivityCollect, postCommunityactivityUncollect } from '@/api/index.js'
import { title } from 'process'
export default {
    name: 'HdqIndex',
    data() {
        return {
            // 活动列表
            activityList: [],
            
            // 分页相关
            page: 1,
            limit: 10,
            hasMore: true,
            listLoading: false,
            
            // 下拉刷新
            refresherTriggered: false,
            lastRefreshTime: 0,
            refreshDebounceTime: 1000,
            keyword:''
        }
    },
    
    mounted() {
        this.getActivityList()
        this.$on('search', (keyword) => {
            this.keyword = keyword
            this.getActivityList()
        })
    },
    watch: {
        // 监听详情页带回的同步数据
        '$store.state.activitySync': {
            handler(sync) {
                if (sync && sync.id) {
                    const index = this.activityList.findIndex(a => String(a.id) === String(sync.id))
                    if (index !== -1) {
                        if (typeof sync.is_collected !== 'undefined') {
                            this.$set(this.activityList[index], 'is_collected', !!sync.is_collected)
                        }
                        // 更新报名状态
                        if (typeof sync.is_registered !== 'undefined') {
                            this.$set(this.activityList[index], 'is_registered', !!sync.is_registered)
                        }
                    }
                }
            },
            immediate: true
        },
    },
    
    methods: {
        // 获取活动列表（重置为第一页）
        async getActivityList() {
            if (this.listLoading) return
            this.listLoading = true
            try {
                const res = await getCommunityactivityList({ 
                    page: 1,
                    limit: this.limit,
                    keyword: this.keyword
                })
                const list = (res && res.data && res.data.list) ? res.data.list : []
                this.activityList = list
                this.page = 1
                this.hasMore = list.length === this.limit
            } finally {
                this.listLoading = false
            }
        },
        
        // 加载更多
        async loadMorePolicies() {
            if (!this.hasMore || this.loading) return
            this.listLoading = true
            const nextPage = this.page + 1
            try {
                const res = await getCommunityactivityList({ 
                    page: nextPage,
                    limit: this.limit
                })
                const list = (res && res.data && res.data.list) ? res.data.list : []
                if (list.length > 0) {
                    this.activityList = this.activityList.concat(list)
                    this.page = nextPage
                }
                this.hasMore = list.length === this.limit
            } finally {
                this.listLoading = false
            }
        },
        
        // 下拉刷新
        async onRefresherRefresh() {
            // 防止重复触发刷新或在加载中再次刷新
            if (this.listLoading || this.refresherTriggered) {
                return
            }
            
            this.refresherTriggered = true
            this.page = 1
            this.hasMore = true
            
            try {
                await this.getActivityList()
            } finally {
                // 结束刷新动画
                this.refresherTriggered = false
            }
        },
        
        // 切换收藏状态
        async toggleFavorite(item, index) {
            
            // 这里应该调用收藏/取消收藏API
            if (item.is_collected) {
                await postCommunityactivityUncollect({
                    activity_id:item.id
                })
            } else {
                await postCommunityactivityCollect({
                    activity_id:item.id
                })
            }
            this.$set(this.activityList[index], 'is_collected', !item.is_collected)
        },
        
        // 处理报名
        handleRegister(item) {
            if (item.status === 'ended') {
                uni.showToast({ title: '报名已结束', icon: 'none' })
                return
            }
            
            // 跳转到报名页面
            uni.navigateTo({
                url: `/views/community/activity-registration?id=${item.id}`
            })
        },
        
        // 跳转到详情页
        goToDetail(item) {
            // 进入详情前保存当前活动的id、收藏与报名状态到store
            this.$store.commit('SET_ACTIVITY_SYNC', {
                id: item.id,
                is_collected: item.is_collected,
                is_registered: item.is_registered,
                title: item.title
            })
            uni.navigateTo({
                url: `/views/community/activity-wall-detail?id=${item.id}`
            })
        },
        
        // 获取状态样式类
        getStatusClass(item) {
            let status = 2;
            if (item.is_registered) {
                status = 5
            } else {
                status = item.register_status
            }
            return {
                'status-ongoing': status == '4',
                'status-ended': status == '1' || status == '2' || status == '3' || status == '5'
            }
        },
        
        // 获取状态文本
        getStatusText(item) {
            let status = 2;
            const statusMap = {
                '1': '报名已结束',
                '2': '报名未开始',
                '3': '人数已满',
                '4': '报名中',
                '5': '已报名'
            }
            if (item.is_registered) {
                status = 5
            } else {
                status = item.register_status
            }

            return statusMap[status] || '未知状态'
        },
        
        // 获取按钮文本
        getButtonText(status) {
            return status ? '已报名' :'立即报名'
        }
    }
}
</script>

<style lang="scss" scoped>
.hdq-container {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    
    .list {
        height: 100%;
        padding:0 20rpx;
        box-sizing: border-box;
    }
    
    .activity-list {
        margin-top: 20rpx;
        .activity-card {
            background: #fff;
            box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            margin-bottom: 20rpx;
            overflow: hidden;
            box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
            
            .card-image {
                position: relative;
                height: 360rpx;
                
                .status-banner {
                    position: absolute;
                    top: 0rpx;
                    left: 0rpx;
                    background: rgba(0,0,0,0.3);
                    border-radius: 20rpx 0rpx 20rpx 0rpx;
                    color: #fff;
                    padding: 8rpx 16rpx;
                    font-size: 24rpx;
                    z-index: 2;
                    
                    &.status-ended {
                        background: rgba(153, 153, 153, 0.8);
                    }
                }
                
                .favorite-btn {
                    position: absolute;
                    top: 0rpx;
                    right: 20rpx;
                    z-index: 2;
                    width: 40rpx;
                    height: 40rpx;
                    background: rgba(0,0,0,0.3);
                    border-radius: 8rpx 8rpx 8rpx 8rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                
                .activity-image {
                    width: 100%;
                    height: 100%;
                }
                
                .title-overlay {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background: rgba(0,0,0,0.3);
                    border-radius: 16rpx 16rpx 0rpx 0rpx;
                    padding: 8rpx 20rpx;
                    backdrop-filter: blur(20rpx);
                    
                    .activity-title {
                        color: #fff;
                        font-size: 28rpx;
                        font-weight: 500;
                        line-height: 1.4;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }
                }
            }
            
            .card-details {
                padding: 16rpx 24rpx;
                
                .tag-time-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 16rpx;
                    
                    .activity-tag {
                        background: #FFF8ED;
                        border-radius: 10rpx 10rpx 10rpx 0rpx;
                        padding: 6rpx 16rpx;
                        border-radius: 20rpx;
                        font-weight: bold;
                        font-size: 24rpx;
                        color: #DF9824;
                    }
                    
                    .activity-time {
                        color: #999;
                        font-size: 24rpx;
                    }
                }
                
                .location-participants {
                    .location, .participants {
                        display: flex;
                        align-items: center;
                        font-size: 26rpx;
                        color: #333;
                        
                        text {
                            margin-left: 8rpx;
                        }
                    }

                    .participants {
                        margin-top: 16rpx;
                    }

                    .meta-avatars {
                        display: flex;
                        align-items: center;

                        .avatar {
                            border: 2rpx solid #fff;

                            &:nth-child(2) {
                                margin-left: -16rpx;
                            }

                            &:nth-child(3) {
                                margin-left: -16rpx;
                            }
                        }
                    }
                }
                
                .action-row {
                    margin: 30rpx 0 14rpx;
                    
                    .register-btn {
                        background: linear-gradient( 270deg, #25A4EF 0%, #0785CF 100%);
                        border-radius: 60rpx 60rpx 60rpx 60rpx;
                        width: 168rpx;
                        height: 56rpx;
                        color: #fff;
                        border: none;
                        font-size: 28rpx;
                        font-weight: bold;
                        text-align: center;
                        line-height: 56rpx;
                        
                        &.disabled {
                            background: #999;
                            color: #fff;
                        }
                        
                        &:active {
                            transform: scale(0.98);
                        }
                    }
                }
            }
        }
        
        .load-more, .no-more {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40rpx 0;
            color: #999;
            font-size: 26rpx;
            
            text {
                margin-left: 12rpx;
            }
        }
    }
}

// 骨架屏样式
.skeleton-card {
    .skeleton-image {
        position: relative;
        height: 360rpx;
        background: #f0f0f0;
        border-radius: 20rpx 20rpx 0 0;
        
        .skeleton-status-banner {
            position: absolute;
            top: 0;
            left: 0;
            width: 120rpx;
            height: 40rpx;
            background: #e0e0e0;
            border-radius: 20rpx 0 20rpx 0;
            z-index: 2;
        }
        
        .skeleton-favorite-btn {
            position: absolute;
            top: 0;
            right: 20rpx;
            width: 40rpx;
            height: 40rpx;
            background: #e0e0e0;
            border-radius: 8rpx;
            z-index: 2;
        }
        
        .skeleton-title-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.3);
            border-radius: 16rpx 16rpx 0 0;
            padding: 8rpx 20rpx;
            
            .skeleton-title {
                height: 28rpx;
                background: #e0e0e0;
                border-radius: 4rpx;
                width: 60%;
            }
        }
    }
    
    .card-details {
        .skeleton-tag {
            width: 80rpx;
            height: 32rpx;
            background: #e0e0e0;
            border-radius: 20rpx;
        }
        
        .skeleton-time {
            width: 120rpx;
            height: 24rpx;
            background: #e0e0e0;
            border-radius: 4rpx;
        }
        
        .skeleton-location {
            width: 200rpx;
            height: 26rpx;
            background: #e0e0e0;
            border-radius: 4rpx;
            margin-bottom: 16rpx;
        }
        
        .skeleton-participants {
            width: 150rpx;
            height: 26rpx;
            background: #e0e0e0;
            border-radius: 4rpx;
        }
        
        .skeleton-register-btn {
            width: 168rpx;
            height: 56rpx;
            background: #e0e0e0;
            border-radius: 60rpx;
        }
    }
}

// 骨架屏动画
@keyframes skeleton-loading {
    0% {
        background-position: -200rpx 0;
    }
    100% {
        background-position: calc(200rpx + 100%) 0;
    }
}

.skeleton-card {
    .skeleton-image,
    .skeleton-status-banner,
    .skeleton-favorite-btn,
    .skeleton-title,
    .skeleton-tag,
    .skeleton-time,
    .skeleton-location,
    .skeleton-participants,
    .skeleton-register-btn {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200rpx 100%;
        animation: skeleton-loading 1.5s infinite;
    }
}
</style>